<template>
  <view class="cm-nav" :style="[wrapperStyle]"
    @click.stop.prevent="clickHandler"
    @touchmove.stop.prevent="moveHandler">
    <view class="cm-nav-fixed cm-flex cm-flex-a-center cm-text-14"
      :style="[style, cmStyle]"
      :class="[navClasses, cmClass]">
      
      <!-- 居中标题，置予最底层 -->
      <view class="title-center cm-text-16 cm-text-center" 
        :style="[titleCenterStyle]">
        <slot name="center"></slot>
      </view>
      
      <view class="cm-flex cm-flex-a-center">
        <view class="cm-flex cm-flex-a-center cm-margin-right-5" v-if="back !== false && back !== null && back !== undefined"
           @click="backHandler">
          <cm-icon type="iconfont icon-arrow-lift"></cm-icon>
          <text v-if="isBackTextShow">{{ back }}</text>          
        </view>
        <slot name="left"></slot>
      </view>
      
      
      
      <slot></slot>
      
      <slot name="right"></slot>
      
    </view>
  </view>
</template>

<script src="./cm-nav.js"></script>

<style lang="stylus">
@import './cm-nav.styl'
</style>
